<template>
  <div id="bigdiv">
  <div id="div1">
      <div class="div2" @click="goHome" :style="{color:this.$route.path=='/home'?'white':'black',backgroundColor:this.$route.path=='/home'?'rgb(142, 210, 229)':'white'}"><i class="el-icon-s-home" style="font-size: 17px;"></i>首页</div>
      <div class="div2" @click="goCommnunity" :style="{color:this.$route.path=='/community'?'white':'black',backgroundColor:this.$route.path=='/community'?'rgb(142, 210, 229)':'white'}"><i class="el-icon-s-comment" style=" font-size: 17px;"></i>学习</div>
      <div class="div2" @click="goGame" :style="{color:this.$route.path=='/game'?'white':'black',backgroundColor:this.$route.path=='/game'?'rgb(142, 210, 229)':'white'}"><i class="el-icon-s-opportunity" style=" font-size: 17px;"></i>益智</div>
      <div class="div2" @click="goMyself" :style="{color:this.$route.path=='/myself'?'white':'black',backgroundColor:this.$route.path=='/myself'?'rgb(142, 210, 229)':'white'}"><i class="el-icon-s-custom" style=" font-size: 17px;"></i>我的</div>
  </div>
</div>
</template>

<script>
export default {
    methods:{
      goHome(){
        this.$router.push("/home");
      },
      goGame(){
        this.$router.push("/game");
      },
      goMyself(){
        this.$router.push("/myself");
      },
      goCommnunity(){
        this.$router.push("community");
      }
    }
}
</script>

<style lang="less" scoped>
#bigdiv{
    position: fixed;
    left: 0;
    bottom: -1px;
    height: 8vh;
    display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
  #div1{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    height: 8vh;
    border-radius: 8px 8px 0 0;
    background-color: rgb(253, 253, 253);
    font-size: 15px;
    letter-spacing: 1px;
    .div2{
      display: flex;
      flex-direction: column;
      border-radius: 7px 7px 5px 5px;
      width: 17vw;
      padding: 3px;
      background-color: white;
      transition: all 0.2s linear;
      // transition: color 0.2s linear;
    }
  }
</style>